<template>
	<view class="">
		<view class="header">
			<view class="basj">
				<image @click="gobacks" src="/static/dazi/bak.png" mode=""></image>
				<text class="title">我的订单</text>
			</view>
		</view>
		<view class="conshe">


			<scroll-view scroll-x="true" class="status-scroll" :show-scrollbar="false" :scroll-into-view="scrollIntoId">
				<view v-for="(status, index) in statusList" :key="index" :id="`status_${status.value}`"
					:class="{ active: currentStatus === status.value }" class="status-item"
					@click="switchStatus(status.value,index)">
					{{status.label}}
				</view>
			</scroll-view>

			<view class="conmsle">
				
				<!-- 循环出 -->
				
				<view class="lison" v-for="(item,index) in 4"   @click="godetail" >
					<view class="rolsn">
						<view class="acins">
							<image src="/static/assets/dd0eea012a8ae34b33342315b7ab8fb4.png" mode=""></image>
							<view class="nams">
								小叮当
							</view>
						</view>
						<view class="staus">
							<text class="sa1">待支付</text>
					<!-- 		<text class="sa1" style=" color: #58A8FF; " >待服务</text>
							<text class="sa1"  style="color: #FB75D6;" >服务中</text>
							<text class="sa1" style=" color: #33C858; ">已完成</text>
							<text class="sa1"  style=" color: #F43D58; ">退款中</text>
							<text class="sa1" style=" color: #C3B0C3; ">已退款</text> -->
						</view>
					</view>

					<view class="shense">
						<image class="achs" src="/static/assets/dd0eea012a8ae34b33342315b7ab8fb4.png" mode=""></image>
						<view class="rinhsde">
							<view class="lcnme">
								<view class="namsxh">
									Ci爱就是你
								</view>
								<view class="timsd">
									2025、2、21 12:20
								</view>
								<view class="" style="width: 10px;"> </view>
							</view>
							<view class="rizhs">
								<view class="onsmj">
									<image src="/static/dazi/Diamond.png" mode=""></image>
									<view class="mosnd">
										199
									</view>
								</view>
								<view class="numd">
									x 1
								</view>
								<view class="allij">
									<text class="asEx">总计:</text>
									<text class="jeb">199</text>
								</view>
							</view>
						</view>
					</view>

					<view class="stayd">
						<view>取消订单</view>
						<!-- <view class="zaol">立即支付</view> -->
						<!-- <view>删除</view> -->
						<view class="qupj" @click.stop="gopj" >去评价</view>
						<!-- <view class="zaol">在来一单</view> -->
					</view>


				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStatus: "all", //当前选中的状态
				// 滚动到指定状态的 ID
				scrollIntoId: "",
				// 订单状态列表
				statusList: [{
						label: "全部",
						value: "all"
					},
					{
						label: "待支付",
						value: "pending"
					},
					{
						label: "待服务",
						value: "shipping"
					},
					{
						label: "服务中",
						value: "delivering"
					},
					{
						label: "已完成",
						value: "completed"
					},
					{
						label: "售后",
						value: "achou"
					},
				],
			}
		},
		methods: {
			// 取评价
			gopj(){
				uni.navigateTo({
					url:'/pages/order/evaluate'
				})
			},
			// 去详情，只有支付之后才能进入
			godetail(){
				uni.navigateTo({
					url:'/pages/order/ordetail'
				})
			},
			switchStatus(status, index) {
				this.currentStatus = status;
				this.scrollIntoId = `status_${status}`; // 设置滚动到的元素 ID

			},

			gobacks() {
				// #ifdef H5
				history.back();
				// #endif

				// #ifdef APP
				uni.navigateBack()
				// #endif

			},
		}
	}
</script>

<style lang="scss">
	.conmsle{
		margin: 30rpx 0;
		padding-bottom: 100rpx;
	}
	.zaol{
		border: none !important;
		background-color: #FB75D6;
		color: #FFFFFF !important;
	}
	.qupj{
		color: #FB75D6 !important;
		border: 1px solid #FB75D6 !important;
	}
	.lison{
		margin-bottom: 30rpx;
		background-color: #fff;
		padding:0 20rpx 20rpx;
		border-radius: 32rpx;
	}
	.stayd{
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		view{
			color: #2A222F;
			font-size: 28rpx;
			// height: 76rpx;
			// line-height: 76rpx;
			border: 1px solid #C3B0C3;
			padding:16rpx 26rpx;
			border-radius: 50rpx;
			margin-right: 20rpx;
		}
	}
	.rinhsde {
		margin-left: 20rpx;
		width: 70%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.rizhs {
		height: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
	}

	.allij {
		.jeb {
			margin-left: 10rpx;
			color: #FB75D6;
			font-size: 32rpx;
			font-weight: bold;
		}

		.asEx {
			color: #837487;
			font-size: 26rpx;
		}
	}

	.numd {
		color: #837487;
		font-size: 24rpx;
	}

	.onsmj {
		display: flex;
		align-items: center;

		.mosnd {
			color: #2A222F;
			font-size: 32rpx;
			
			font-weight: bold;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.rinhsde {
		height: 160rpx;
	}

	.lcnme {
		height: 160rpx;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;

		.timsd {
			font-weight: bold;
			margin-top: 20rpx;
			color: #FB75D6;
			font-size: 24rpx;
		}

		.namsxh {
			color: #2A222F;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.shense {
		margin-top: 30rpx;
		display: flex;
		align-items: center;

		// justify-content: space-between;
		.achs {
			width: 160rpx;
			height: 160rpx;
			border-radius: 30rpx;
		}
	}

	.rolsn {
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #F8EFF9;
	}

	.staus {
		.sa1 {
			color: #FF9500;
			font-size: 28rpx;
			font-weight: 700;
		}
	}

	.acins {
		display: flex;
		align-items: center;

		.nams {
			font-weight: bold;
			margin-left: 20rpx;
			color: #2A222F;
			font-size: 24rpx;
		}

		image {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
		}
	}

	.active {
		background-color: #fb75d6 !important;
		color: #fff !important;
	}

	.order-page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.status-scroll {
		white-space: nowrap;
		/* 禁止换行 */
		// background-color: #fff;
		padding: 10px 0;

	}

	.status-item {
		display: inline-block;
		margin: 0 20px 0 0;
		color: #2A222F;
		font-size: 28rpx;

		background-color: #fff;
		border-radius: 50rpx;
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 20rpx;
		// padding: 16rpx 30rpx;
		// color: #2A222F;
		// font-size: 28rpx;
	}

	.status-item.active {
		color: #ff5c00;
		font-weight: bold;
	}

	.order-list {
		flex: 1;
		padding: 10px;
		background-color: #f5f5f5;
	}

	.order-item {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
		border-radius: 5px;
	}

	.empty-tip {
		text-align: center;
		margin-top: 20px;
		color: #999;
	}

	.rols {
		margin-right: 20rpx;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 16rpx 30rpx;
		color: #2A222F;
		font-size: 28rpx;
	}

	.allins {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.conshe {
		margin: 30rpx 0;
	}

	page {
		padding: 30rpx;
		background-color: #f7eff8;
		overflow: hidden;
		background-image: url('/static/assets7/e9cd3fc4ee4eabc1262262a469ab1c21.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.basj {
		display: flex;
		align-items: center;
		height: 60rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}

		.title {
			margin-left: 10rpx;
			color: #2A222F;
			font-size: 40rpx;
		}
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;

		letter-spacing: 2rpx;
		/* 字母间距 */
		font-weight: 600;
		// border: #dddddd solid 1px;

		.btn-side {
			position: absolute;
			line-height: 60rpx;
			font-size: 28rpx;
			cursor: pointer;

			&.right {
				right: 30rpx;
			}
		}
	}
</style>